<template>

  <div class="aside_main" style="padding:0px 15px 20px 15px">
    <!-- <el-button type="text">
    <i class="el-icon-d-arrow-left"></i>
    <span style="font-size:16px">案件详情</span>
    </el-button> -->
    <div
      class="case_detail"
      style="
        over-flow: hidden;
        font-size: 17px;
        color: #000000;
        white-space: nowrap;
        padding-top:20px;
      "
    > 
      <span
        style="
          overflow: hidden;
          font-size: 17px;
          color: #000000;
          margin-right: 5px;
          width: 200px;
          white-space: nowrap;
          text-overflow: ellipsis;
        "
        >{{ caseDetail.case_name }}
      </span>
     
    </div>
    <div class="updateBlock">
      <div class="block">
        <div>
          <svg-icon icon-class="number" class-name="number" />
          <span>案件状态:</span>
        </div>
      </div>
      <div class="valuestyle">
        <el-button type="text" v-show="isShowStatus"><el-tag
          @click="handleUpdate('isShowStatus', 'caseStatusRef')"
        
          :type="caseDetail.case_status | statusFilter"
        >
          {{ caseDetail.case_status }}
        </el-tag></el-button>
      <el-select
        ref="caseStatusRef"
        :automatic-dropdown="true"
        :popper-append-to-body="false"
        size="small"
        v-show="!isShowStatus"
        v-model="caseDetail.case_status"
        @visible-change="changeColseSelect($event)"
        placeholder="请选择"
      >
        <el-option
          @click="isShows"
          v-for="item in statusOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      </div>
    </div>
    <div class="updateBlock">
      <div class="block">
        <div>
          <svg-icon icon-class="number" class-name="number" />
          <span>案件编号:</span>
        </div>
      </div>
      <div class="valuestyle">
        <span v-show="isShowNumber">{{ caseDetail.case_number }}</span>
        <input v-show="!isShowNumber" v-model="caseDetail.case_number" />
      </div>
    </div>
    <div class="updateBlock">
      <div class="block">
        <div>
          <svg-icon icon-class="peoples" class-name="name" />
          <span>承办人员:</span>
        </div>
        <el-button
          type="text"
          @click="handleUpdate('isShowExaminer', 'caseExaminerRef')"
          >{{ isShowExaminer ? "编辑" : "完成编辑" }}</el-button
        >
      </div>
      <div>
        <div class="valuestyle">
          <span v-show="isShowExaminer">{{
            caseDetail.case_examiner.join()
          }}</span>
          <el-select
            ref="caseExaminerRef"
            v-show="!isShowExaminer"
            size="small"
            v-model="caseDetail.case_examiner"
            filterable
            multiple
            placeholder="请选择"
            @visible-change="changeColseSelect($event)"
            :popper-append-to-body="false"
            :automatic-dropdown="true"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </div>
      </div>
    </div>
    <div class="updateBlock">
      <div class="block">
        <div>
          <i class="el-icon-user"> </i>
          <span>创建人员:</span>
        </div>
      </div>
      <div>
        <div class="valuestyle">
          <span>{{ caseDetail.case_creater }}</span>
        </div>
      </div>
    </div>
    <div class="updateBlock">
      <div class="block">
        <div>
          <svg-icon icon-class="timer" class-name="timer" />
          <span>创建时间:</span>
        </div>
      </div>
      <div>
        <div class="valuestyle">
          <span>{{ caseDetail.start_time | parseTime }}</span>
        </div>
      </div>
    </div>
    <div class="updateBlock updateBlockSelect">
      <div class="block">
        <div>
          <svg-icon icon-class="label" class-name="label" />
          <span>案件标签:</span>
        </div>
        <el-button
          type="text"
          @click="handleUpdate('isShowLabel', 'caseLabelRef')"
          >{{ isShowLabel ? "编辑" : "完成编辑" }}</el-button
        >
      </div>
      <div>
        <div class="valuestyle">
          <div v-show="isShowLabel">
            <el-tag
              style="margin: 5px 5px 0 0;color:black"
              v-for="(tag, index) in caseDetail.label"
              :key="index"
              v-model="caseDetail.label"
              :disable-transitions="false"
              :color="tag.color"
              size="small"
            >
              <span>{{ tag.name }}</span>
            </el-tag>
          </div>
          <div v-show="!isShowLabel">
            <el-select
              ref="caseLabelRef"
              size="small"
              v-model="caseDetail.label"
              value-key="name"
              filterable
              multiple
              @visible-change="changeColseSelect($event)"
              placeholder="请选择"
              :popper-append-to-body="false"
              :automatic-dropdown="true"
            >
              <!-- @change="updateData" -->
              <!-- :popper-append-to-body="false" -->
              <el-option
                v-for="item in labels"
                :key="item.name"
                :label="item.name"
                :value="item"
              >
                <div class="optionstyle">
                  <div
                    class="optiontest"
                    :style="'background-color:' + item.color"
                  ></div>
                  <div class="optionlabel">{{ item.name }}</div>
                </div>
              </el-option>
            </el-select>
            <div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { updateArticle } from "@/api/evidence";
import { formatTime, parseTime } from "@/utils/index";
import { fetchLabel } from "@/api/labels";
import index from "@/components/BackgroundCanvas/index.vue";

const labelOptionsx = ["涉毒", "涉黄", "教育相关", "医疗相关"];
export default {
  name: "formindex",
  components: { index },
  filters: {
    statusFilter(status) {
      const statusMap = {
         已存档: "warning",
        进行中: "success",
        已完成: "danger",
      };
      return statusMap[status];
    },
    typeFilter(type) {
      return calendarTypeKeyValue[type];
    },
    formatDate(t) {
      return formatTime(new Date(t).getTime);
    },
    parseTime: parseTime,
    formatTime: formatTime,
  },
  data() {
    return {
      evidenceIds: [],
      labels: [],
      value: null,
      inputVisible: false,
      inputValue: "",
      labelOptions: labelOptionsx,
      isShowNumber: true,
      isShowLabel: true,
      isShowExaminer: true,
      isShowButton: false,
      isShowStatus: true,
      isShowN: {
        isShowLabel: true,
      },
      caseDetail: {
        id: null,
        case_number: null,
        case_name: "",
        case_examiner: [],
        case_creater: "",
        start_time: new Date(),
        label: [],
        case_status: "",
      },
      statusOptions: [
        {
          value: "进行中",
          label: "进行中",
        },
        {
          value: "已存档",
          label: "已存档",
        },
        {
          value: "已完成",
          label: "已完成",
        },
      ],
      options: [
        {
          value: "张三",
          label: "张三",
        },
        {
          value: "李四",
          label: "李四",
        },
        {
          value: "王五",
          label: "王五",
        },
        {
          value: "赵六",
          label: "赵六",
        },
      ],
    };
  },
  created() {
    this.getLabels();
    this.getCaseDetail();
  },
  methods: {
    changeColseSelect(callback) {
            if (!callback) {
                setTimeout(()=>{
                 this.updateData();
                 this.isShows()
                 },500)
            }
    },
    strListSort(val1, val2) {
      val1 = val1
        .sort((val1, b) => {
          return val1.localeCompare(b);
        })
        .toString();
      val2 = val2
        .sort((val2, b) => {
          return val2.localeCompare(b);
        })
        .toString();
      return val1 !== val2;
    },
    getCaseDetail() {
      if (this.caseDetail) {
        //  this.caseDetail = JSON.parse(JSON.stringify(this.$route.params.rowkey));
        //  this.caseDetail = JSON.parse(this.$route.query.id);
        // this.caseDetail.id=this.$route.query.id;
        this.caseDetail = JSON.parse(sessionStorage.getItem("rowkey"));
      }
    },
    getLabels(){
        this.labels=[]
      fetchLabel().then((response)=>{
        for (let i in response.data.list) {
          // document.getElementsByClassName('el-select el-tag')[0].style='background-color:red'
            this.labels.push(JSON.parse(JSON.stringify(response.data.list[i])));  
          }
      })
    },
    // 点击编辑，获取焦点事件
    handleUpdate(el, show) {
      eval("this." + el + "=!this." + el);
      if(eval("this." + el)==false){
          this.$nextTick((_) => {
        this.$refs[show].focus();
      });
      }else{
          this.isShows()
      }
    },
    updateData() {
      //  this.caseDetail.start_time=new Date('caseDetail.start_time');
      updateArticle(this.caseDetail).then((response) => {
        this.$notify({
          // title: "Success",
          message: "更新成功",
          type: "success",
          duration: 2000,
        });
      });
    },
    handleData(tag) {
      let inputValue = tag;
      if (
        inputValue != null &&
        this.caseDetail.label.indexOf(inputValue) <= -1
      ) {
        this.caseDetail.label.push(inputValue);
      } else {
        this.$message({
          message: "不能重复添加标签",
          type: "warning",
        });
      }
      this.inputVisible = false;
    },
    handleClose(tag) {
      this.caseDetail.label.splice(this.caseDetail.label.indexOf(tag), 1);
    },
    senddetail(row) {
      // this.$router.push({name:'Detail',params:{rowkey:row}})
      localStorage.setItem("rowkey", JSON.stringify(row));
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (
        inputValue != null &&
        this.caseDetail.label.indexOf(inputValue) <= -1
      ) {
        this.caseDetail.label.push(inputValue);
      } else {
        this.$message({
          message: "不能重复添加标签",
          type: "warning",
        });
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    isShows() {
      this.isShowLabel = true;
      this.isShowExaminer = true;
      this.isShowStatus = true;
    },
    //  open(val) {
    //     this.$confirm('检测到修改的内容，是否在离开页面前放弃修改？', '确认放弃修改信息', {
    //       distinguishCancelAndClose: true,
    //       confirmButtonText: '保存',
    //       cancelButtonText: '放弃修改'
    //     })
    //       .then(() => {
    //         //保存修改
    //         this.isShows();
    //         // this.updateData();
    //       })
    //       .catch(action => {
    //         if(action==='cancel'){
    //           //放弃保存并离开页面
    //         this.isShows();
    //         if(val=='isShowLabel'){
    //             this.caseDetail.label=this.$route.params.rowkey.label
    //           }else if(val=='isShowExaminer'){
    //             this.caseDetail.case_examiner=this.$route.params.rowkey.case_examiner
    //           }
    //         }else{
    //           //停留在当前页面
    //           if(val=='isShowLabel'){
    //             this.isShowLabel=false;
    //           }else if(val=='isShowExaminer'){
    //             this.isShowExaminer=false;
    //           }
    //           // document.getElementByClassName("aside_main").focus();
    //         }
    //       });
    //   },
  },
};
</script>

<style lang="scss" scoped>
.case_detail {
  height: 20px;
  font-size: 15px;
  margin-bottom: 20px;
  color: #666;
  display: flex; /*实现垂直居中*/
  align-items: center; /*实现水平居中*/
  justify-content: left;
  text-align: justify;
  //border-bottom: 1px solid #e8e8e8;
}
.el-tag {
  font-size: 15px;
}
.updateBlock {
  min-height: 70px;
  width: 100%;
  border-bottom: 1px solid #e8e8e8;
 
  padding: 10px 5px;
  //color: #666666;
  //   overflow: hidden;
  word-wrap: break-word;
  font-size: 15px;
  .el-button {
    color: #000000;
  }
}

.block svg,
i {
  font-size: 14px;
  margin-right: 5px;
}
.block {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-content: center;
  div {
    margin: auto 0;
  }
  span {
    font-size: 16px;
    color: #000000;
  }
}
.valuestyle ::v-deep .el-button {
  padding: 0px;
}
.valuestyle {
  padding-left: 24px;
  margin-top: 10px;
}

.optiontest {
  height: 20px;
  width: 20px;
  //background-color: #000000;
  border-radius: 5px;
}
.optionstyle {
  display: flex;
  margin-top: 5px;
}
.optionlabel {
  height: 20px;
  line-height: 20px;
  margin-left: 10px;
}
.aside_main {
  height: calc(100% - 0px);
}
.valuestyle ::v-deep .el-button{
  padding: 0px;
}
</style>
